// Only hide nested ULs if they are accessible via JS
.js .page-sidebar {
    ul ul {
        display: none;
    }
}

.page-sidebar {
    max-height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    overflow: auto;
    top: 20px;

    a {
        @include themer(color, (
            'dark': #c7c7c7,
            'light': #999,
        ));

        border-bottom: 0;
    }

    ul {
        padding-left: 15px;

        & ul {
            font-size: 90%;
        }

        li {
            list-style: none;
        }

        a {
            border-bottom: 0;
            display: block;
            font-weight: 500;
            position: relative;

            &:focus,
            &:hover {
                @include themer(color, (
                    'dark': $site-ui-brand-dark,
                    'light': $site-ui-brand-light,
                ));

                background-color: transparent;
            }

            &.active,
            &.active:focus,
            &.active:hover {
                @include themer(color, (
                    'dark': $site-ui-brand-dark,
                    'light': $site-ui-brand-light,
                ));

                font-weight: 700;

                // In order to prevent being affected by the extra width misaligning
                // content, we'll do position absolute the border.
                &::before {
                    @include themer(border-left-color, (
                        'dark': $site-ui-brand-dark,
                        'light': $site-ui-brand-light,
                    ));

                    border-left-style: solid;
                    border-left-width: $sidebar-border-width;
                    content: '';
                    display: block;
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                }
            }

            // Unhide any nested ULs when this TOC section is active
            &.active + ul {
                display: block;
            }
        }
    }
}
